<template>
  <n-layout-header class="header">
    <div class="header-logo"></div>
    <div class="header-menu">
      <n-space :size="24" align="center">
        <n-icon size="24">
          <InformIcon />
        </n-icon>
        <n-dropdown :options="options" @select="handleSelect">
          <div class="flex-center pointer">
            <n-avatar
              round
              class="mr-8"
              :size="20"
              src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
            />
            <span class="header-user">管理员</span>
          </div>
        </n-dropdown>
      </n-space>
    </div>
  </n-layout-header>
</template>

<script lang="ts" setup>
  import {
    NotificationsOutline as InformIcon,
    SettingsOutline as SettingIcon,
    ArrowUndoOutline as ArrowIcon
  } from '@vicons/ionicons5'

  const router = useRouter()

  // 菜单列表
  const options = [
    {
      label: '设置',
      key: 'setting',
      icon: renderIcon(SettingIcon)
    },
    {
      type: 'divider',
      key: 'd1'
    },
    {
      label: '退出登录',
      key: 'logout',
      icon: renderIcon(ArrowIcon)
    }
  ]

  // 退出登录
  const logout = () => {
    router.push({
      path: '/login'
    })
  }

  // 处理菜单选择
  const handleSelect = (key: string) => {
    switch (key) {
      case 'setting':
        break

      case 'logout':
        logout()
        break
    }
  }
</script>

<style scoped lang="scss">
  .n-layout-header {
    height: $layout-height;
    display: flex;
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid $border-color;
    &-logo {
      width: 200px;
    }
    &-menu {
      margin-right: 24px;
    }
  }
</style>
